<template>
  <div style="padding: 20px 40px">
    <el-divider content-position="left">关于我们</el-divider>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" icon="Plus" @click="openAdd()">
          添加
        </el-button>
      </el-col>
    </el-row>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="标题" width="">
          <template #default="scope">861193042306093</template>
        </el-table-column>
        <el-table-column label="排序" width="">
          <template #default="scope">861193042306093</template>
        </el-table-column>
        <el-table-column label="是否显示" width="">
          <template #default="scope">离线</template>
        </el-table-column>

        <el-table-column label="创建时间" width="">
          <template #default="scope">2016-05-03</template>
        </el-table-column>
        <el-table-column label="更新时间" width="">
          <template #default="scope">2016-05-03</template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default>
            <el-button type="primary" icon="Search" @click="ToBms()" circle />
            <el-button type="success" @click="openAdd()" icon="Edit" circle />
            <el-button type="danger" icon="Delete" @click="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @pagination="storeDeviceList"
        v-model:total="assignableFilt.pages.total"
        v-model:page="assignableFilt.pages.current"
        v-model:limit="assignableFilt.pages.size"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
const router = useRouter(); // 获取路由实例
import { ElTable } from "element-plus";
import StoreDeviceApi, {
  FencesPageQuery,
  assignableFiltQuery,
  DeviceForm,
  storeSelectList,
} from "@/api/storeDevice";

interface User {
  date: string;
  name: string;
  address: string;
}
let input = ref();
let value = ref();
let assignableFilt = reactive<assignableFiltQuery>({
  pages: {
    current: 1,
    size: 10,
    total: 0,
    startTime: "",
    endTime: "",
    orders: [
      {
        column: "",
        asc: true,
      },
    ],
  },
  deviceTypeId: undefined,
  deviceCode: undefined,
  btCode: undefined,
  deviceName: undefined,
});
const option = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const tableData: User[] = [
  {
    date: "2016-05-04",
    name: "Aleyna Kutzner",
    address: "Lohrbergstr. 86c, Süd Lilli, Saarland",
  },
  {
    date: "2016-05-03",
    name: "Helen Jacobi",
    address: "760 A Street, South Frankfield, Illinois",
  },
  {
    date: "2016-05-02",
    name: "Brandon Deckert",
    address: "Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen",
  },
  {
    date: "2016-05-01",
    name: "Margie Smith",
    address: "23618 Windsor Drive, West Ricardoview, Idaho",
  },
];

import type { ComponentSize, FormInstance, FormRules } from "element-plus";

interface RuleForm {
  name: string;
  region: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "",
  region: "",
});

const locationOptions = ["Home", "Company", "School"];

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输入内容", trigger: "blur" },
    { min: 3, max: 5, message: "输入编号长度不正确", trigger: "blur" },
  ],
  region: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
function storeDeviceList() {}

// 新增协议

function openAdd() {
  router.push("/leaseManagement/addaboutus");
}
// 跳转控制页面
function ToBms() {
  router.push("/bmscontrol/index");
}

// 删除

function Delete() {
  ElMessageBox.confirm("是否删除设备?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "custom-message-box",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.custom-message-box .el-message-box__message {
  font-size: 18px;
  width: 800px;
}
</style>
